@import "../imports/mixins";

.jw-skin-bekle {
    @active-color: #139ed5;
    @inactive-color: #fff;
    @hover-color: @active-color;

    @progress-horz-gradient: linear-gradient(to bottom, #15b2f0, #149bd1 50%, #15b2f0 100%);
    @progress-vert-gradient: linear-gradient(to right, #15b2f0, #149bd1 50%, #15b2f0 100%);
    @buffer-gradient: linear-gradient(to bottom, #5e6575, #565e6b 50%, #5e6575 100%);
    @rail-gradient: linear-gradient(to bottom, #323b4c, #2f3847 50%, #323b4c 100%);
    @rail-vert-gradient: linear-gradient(to right, #323b4c, #2f3847 50%, #323b4c 100%);

    @rail-height: .3em;
    @cue-size: .2em;

    @progress-color: @progress-horz-gradient;
    @buffer-color: @buffer-gradient;
    @rail-color: @rail-gradient;
    @thumb-color: @progress-color;
    @controlbar-background: fade(#182335, 80%);

    @display-icon-color: @inactive-color;
    @display-icon-hover-color: @inactive-color;
    @display-bkgd-color: @rail-color;
    @display-bkgd-hover-color: @active-color;

    @cc-inactive: #5e6575;
    @cc-active: @active-color;

    @volume-background: fade(#505863,90%);

    @controlbar-height: 2em;

    @nextup-position-bottom: @controlbar-height + 0.7em + 0.5em;
    @nextup-position-bottom-touch: (@controlbar-height * 1.5em) + 0.7em + 0.8em;
    @nextup-position-right: 2%;
    @nextup-border-radius: 0.3em;
    @nextup-header-background: fade(#182335, 90%);
    @nextup-body-background: darken(@nextup-header-background, 5%);
    @nextup-body-text-color-overflow: darken(#182335, 5%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();
    .inset-controlbar();
    .jw-controlbar {
        border-radius: .3em;
    }

    .jw-tooltip-title {
        border-bottom: 1px solid @controlbar-background;
        background-color: @controlbar-background;
    }

    .jw-slider-horizontal,
    .jw-slider-vertical {

        .jw-rail,
        .jw-progress,
        .jw-buffer {
            border-radius: @ui-corner-round;
        }

        .jw-knob {
            background-color: #fff;
            width: .7em;
            height: .7em;
            border-radius: 50%;
            .horizontally-centered-rail-element(@def-rail-width, 0.7em);
        }
    }

    .jw-slider-horizontal {
        background: transparent;

        .jw-cue {
            .vertically-centered-rail-element(@rail-height, @cue-size);

            background-color: #fff;
            width: @cue-size;
            height: @cue-size;
            border-radius: 1em;
        }

        .jw-knob {
            .vertically-centered-rail-element(@rail-height, .7em);
        }
    }

    .jw-slider-vertical {

        .jw-rail,
        .jw-progress {
            width: @rail-height;
        }

        .jw-rail {
            background: @rail-vert-gradient;
        }

        .jw-progress {
            background: @progress-vert-gradient;
        }

    }

    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu,
    .jw-skip {
        border-radius: .3em;
    }

    .jw-volume-tip,
    .jw-menu {
        bottom: .2em;
    }
}
